<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link href="css/editor_styles.css" rel="stylesheet" type="text/css" />

		<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
		<script src="javascript/easeljs-0.6.0.min.js" type="text/javascript"></script>
		<script src="javascript/Box2dWeb-2.1.a.3.min.js" type="text/javascript"></script>
		<script src="javascript/tools.js" type="text/javascript"></script>
		<script src="javascript/editor/editor.js" type="text/javascript"></script>
		<script src="javascript/editor/json.js" type="text/javascript"></script>
		<script src="javascript/editor/jscolor/jscolor.js" type="text/javascript"></script>
		<script src="javascript/editor/Blob.js" type="application/ecmascript"></script>
		<script src="javascript/editor/canvas-toBlob.js" type="text/javascript"></script>
		<script src="javascript/editor/FileSaver.js" type="text/javascript"></script>

		<title> Dogs are the better Cats </title>
	</head>	
	
	<body id="body" onload="init()">
		<div id="main">
			<div id="canvasDiv" class="left">
				<!--<canvas id="canvas0" class="canvasLayer" width="640" height="640"></canvas>-->
			</div>
			<div id="tools" class="left">
				<div id="colorDiv">
					<input id="colorpicker" class="color" onclick="setTakePicker();"/>
					<div id="recentColorChooser">
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="clear"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="clear"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="clear"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
						<div class="recentColorBox left"></div>
					</div>
				</div>
				<div id="toolBoxes">
					<div class="toolBox left" id="delete">delete</div>
					<div class="toolBox left" id="pipette">pipette</div>
					<div class="clear"></div>
				</div>
				<div id="resolutionSelect">
					<div>Change Resolution:</div>
					<select id="resSelect">
						<option value="24">24x24</option>
						<option value="32" selected>32x32</option>
						<option value="42">42x42</option>
						<option value="56">56x56</option>
						<option value="64">64x64</option>
					</select>
				</div>
				<div id="preview">
					<canvas id="previewCanvas" width="64" height="64"></canvas>
				</div>
				<div id="layerControl">
					<input type="button" value="Add Layer" onclick="addLayer();"></input>
					<input type="button" value="Remove Layer" onclick="removeLayer();"></input><br/>
					<input type="button" value="Prev Layer" onclick="prevLayer();"></input>
					<input type="button" value="Next Layer" onclick="nextLayer();"></input><br/>
					<input type="checkbox" id="keepPicture" checked>Keep Picture</input>
					<div class="right" id="layerID"></div>
				</div>
			</div>
			<div class="left">
				<div id="previewRow">
					
				</div>
				<br/>
				<div>
					<div id="debug"></div>
					<div class="right" id="fpsCount"></div>
					<button type="button" onclick="toggleDrawGrid();">Toggle Grid</button><br/>
					<button type="button" onclick="saveToJSON();">Save to JSON</button><br/>
					<button type="button" onclick="createSpriteSheetWindow();">Save to PNG</button><br/>
				</div>
			</div>
			<div class="clear"></div>
			<div class="hiddenContainer" id="jsonLoad">
				Click here to open/close the JSON input area ->> . <<--
				<div style="display:none" id="jsonIn" class="hidden" width="600">
					<textarea id="jsonInputArea" rows="30" cols="145"></textarea>
					<input type="button" onclick="loadJSON();" value="Load JSON"/>
				</div>
			</div>
			<div class="hiddenContainer" id="jsonSave">
				Click here to open/close the JSON output area -->> . <<--
				<div style="display:none" id="jsonDebug" class="hidden" width="600">
					<textarea id="jsonOutputArea" rows="30" cols="145"></textarea>
				</div>
			</div>
		</div>
		
	</body>
</html>